<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>五行命盘小程序 - 赵长青</title>
    <!-- 引入 echarts.js -->
    <script src="/static/js/echarts.js"></script>
    <style>

* {
    margin: 0;
    padding: 0;
    border: 0;
}
input {
    box-sizing: border-box;
    padding: 1px 2px;
    border: 1px solid #aaa;
}
table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
}
table.dataintable {
    margin-top: 15px;
    border-collapse: collapse;
    border: 1px solid #aaa;
    width: 40%;
    margin:auto;
}
table.dataintable td {
    vertical-align: text-top;
    padding: 9px 9px 9px 9px;
    border: 1px solid #aaa;
}
td {
    display: table-cell;
    vertical-align: inherit;
    text-align: center;
}
th {
    border: 1px solid #aaa;
    text-align: center;
    font-size: 50%;
}
    </style>
</head>
<body>
<br />
<form action="#" method="get" style="width:50%; margin:auto">
    生辰：
    <select name="gender">
        <option value="male" {% ifequal gender "male" %}selected{% endifequal %}>男性</option>
        <option value="female" {% ifequal gender "female" %}selected{% endifequal %}>女性</option>
    </select>
    <select name="date_type">
        <option value="Solar" {% ifequal date_type "Solar" %}selected{% endifequal %}>公历</option>
        <option value="Lunar" {% ifequal date_type "Lunar" %}selected{% endifequal %}>农历</option>
    </select>
    年：<input type="number" name="dt" style="width:60px" value="{{ dt_list.0 }}">
    月：<input type="number" name="dt" style="width:60px" value="{{ dt_list.1 }}">
    日：<input type="number" name="dt" style="width:60px" value="{{ dt_list.2 }}">
    时：<select name="dt">
        <option value="0" {% ifequal dt_list.3 "0" %}selected{% endifequal %}>0:00-1:00</option>
        <option value="2" {% ifequal dt_list.3 "2" %}selected{% endifequal %}>1:00-3:00</option>
        <option value="4" {% ifequal dt_list.3 "4" %}selected{% endifequal %}>3:00-5:00</option>
        <option value="6" {% ifequal dt_list.3 "6" %}selected{% endifequal %}>5:00-7:00</option>
        <option value="8" {% ifequal dt_list.3 "8" %}selected{% endifequal %}>7:00-9:00</option>
        <option value="10" {% ifequal dt_list.3 "10" %}selected{% endifequal %}>9:00-11:00</option>
        <option value="12" {% ifequal dt_list.3 "12" %}selected{% endifequal %}>11:00-13:00</option>
        <option value="14" {% ifequal dt_list.3 "14" %}selected{% endifequal %}>13:00-15:00</option>
        <option value="16" {% ifequal dt_list.3 "16" %}selected{% endifequal %}>15:00-17:00</option>
        <option value="18" {% ifequal dt_list.3 "18" %}selected{% endifequal %}>17:00-19:00</option>
        <option value="20" {% ifequal dt_list.3 "20" %}selected{% endifequal %}>19:00-21:00</option>
        <option value="22" {% ifequal dt_list.3 "22" %}selected{% endifequal %}>21:00-23:00</option>
        <option value="23" {% ifequal dt_list.3 "23" %}selected{% endifequal %}>23:00-24:00</option>
    </select>
    <input type="submit" value="确定" />
</form>

<form action="#" method="get" style="width:50%; margin:auto">
    四柱：
    <select name="gender">
        <option value="male" {% ifequal gender "male" %}selected{% endifequal %}>男性</option>
        <option value="female" {% ifequal gender "female" %}selected{% endifequal %}>女性</option>
    </select>
    年柱：<input type="text" name="gz" style="width:60px" value="{{ gz_list.0 }}">
    月柱：<input type="text" name="gz" style="width:60px" value="{{ gz_list.1 }}">
    日柱：<input type="text" name="gz" style="width:60px" value="{{ gz_list.2 }}">
    时柱：<input type="text" name="gz" style="width:60px" value="{{ gz_list.3 }}">
    <input type="submit" value="确定" />
</form>
<br />
<table class="dataintable">
    <tbody>
    <tr>
        <th>&nbsp;</th>
        <td>年</td>
        <td>月</td>
        <td>日</td>
        <td>时</td>
    </tr>
    <tr>
        <th>干神</th>
        {% for col in mp.gans_shen %}
        <td>{{ col.0 }}</td>
        {% endfor %}
    </tr>
    <tr>
        <th rowspan="2">天干<br/>地支</th>
        {% for col in mp.gans %}
        <td>{{ col.0 }}</td>
        {% endfor %}
    </tr>
    <tr>
        {% for col in mp.zhis %}
        <td>{{ col.0 }}</td>
        {% endfor %}
    </tr>
    <tr>
        <th>藏干</th>
        {% for col in mp.cang_gans %}
        <td>{% for item in col %}
            {% if forloop.counter0 %}<br/>{% endif %}
            {{ item }}
            {% endfor %}
        </td>
        {% endfor %}
    </tr>
    <tr>
        <th>支神</th>
        {% for col in mp.zhis_shen %}
        <td>{% for item in col %}
            {% if forloop.counter0 %}<br/>{% endif %}
            {{ item }}
            {% endfor %}
        </td>
        {% endfor %}
    </tr>
    <tr>
        <th>长生</th>
        {% for col in mp.zhangsheng %}
        <td>{{ col.0 }}</td>
        {% endfor %}
    </tr>
    <tr>
        <th>自坐</th>
        {% for col in mp.self_zs %}
        <td>{{ col.0 }}</td>
        {% endfor %}
    </tr>
    <tr>
        <th>禄位</th>
        {% for col in mp.lushen_zhis %}
        <td>{{ col.0 }}</td>
        {% endfor %}
    </tr>
    <tr>
        <th>纳音</th>
        {% for col in mp.nayin %}
        <td>{{ col.0 }}</td>
        {% endfor %}
    </tr>
    <tr>
        <th>神煞</th>
        {% for col in mp.shensha %}
        <td>{% for item in col %}
            {% if forloop.counter0 %}<br/>{% endif %}
            {{ item }}
            {% endfor %}
        </td>
        {% endfor %}
    </tr>
    <tr>
        <th>格局</th>
        <td colspan="4" style="text-align:left;">
            {{ mp.geju }} &nbsp;
        </td>
    </tr>
    <tr>
        <th>喜用</th>
        <td colspan="4" style="text-align:left;">
            用神：{{ mp.yong_shen }}，喜神：{{ mp.xi_shen }}
        </td>
    </tr>
    <tr>
        <th>宫位关系</th>
        <td colspan="4" style="text-align:left;">
            {% for item in mp.relationships %}
            {% if forloop.counter0 %}, {% endif %}
            {{ item }}{% endfor %}
        </td>
    </tr>
    <tr>
        <th>大运流年</th>
        <td colspan="4" style="text-align:left;">
            {% for item in mp.dyln_relationships %}
            {% if forloop.counter0 %}, {% endif %}
            {{ item }}{% endfor %}
        </td>
    </tr>
    </tbody>
</table>
<br />
<table class="dataintable">
    <tbody>
    {% if mp.dayun and mp.dayun.0.year %}
    <tr>
        <th rowspan="2">大运</th>
        {% for item in mp.dayun %}
        <td {% if item.loop %}style="background-color: #CFCFCF;"{% endif %}>{{ item.year }}</td>
        {% endfor %}
    </tr>
    <tr>
        {% for item in mp.dayun %}
        <td {% if item.loop %}style="background-color: #CFCFCF;"{% endif %}>{{item.name}}</td>
        {% endfor %}
    </tr>
    {% else %}
    <tr>
        <th>大运</th>
        {% for item in mp.dayun %}
        <td {% if item.loop %}style="background-color: #CFCFCF;"{% endif %}>{{item.name}}</td>
        {% endfor %}
    </tr>
    {% endif %}
    {% if mp.liunian %}
    <tr>
        <th rowspan="2">流年</th>
        {% for item in mp.liunian %}
        <td {% if item.this_year %}style="background-color: #CFCFCF;"{% endif %}>{{item.year}}</td>
        {% endfor %}
    </tr>
    <tr>
        {% for item in mp.liunian %}
        <td {% if item.this_year %}style="background-color: #CFCFCF;"{% endif %}>{{item.name}}</td>
        {% endfor %}
    </tr>
    {% endif %}
    </tbody>
</table>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<br />
<div id="main" style="width:600px;height:400px;margin:auto;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '{{ mp.title }}',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {d}%'
    },
    legend: {
        bottom: 10,
        left: 'center',
        data: ['金', '木', '水', '火', '土']
    },
    series: [
        {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
                {value: {{ mp.energy.木 }}, name: '木({{ mp.roles.木 }})', itemStyle: {color:"green"}},
                {value: {{ mp.energy.火 }}, name: '火({{ mp.roles.火 }})', itemStyle: {color:"red"}},
                {value: {{ mp.energy.土 }}, name: '土({{ mp.roles.土 }})', itemStyle: {color:"brown"}},
                {value: {{ mp.energy.金 }}, name: '金({{ mp.roles.金 }})', itemStyle: {color:"gold"}},
                {value: {{ mp.energy.水 }}, name: '水({{ mp.roles.水 }})', itemStyle: {color:"black"}}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
myChart.setOption(option);
</script>
</body>
</html>
